﻿@page "/datagrid/stacked-header"

@using Syncfusion.Blazor.Grids
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample demonstrates the DataGrid component with the stacked header and resize feature. In this sample, we have shown multiple level of column headers.</p>
</SampleDescription>
<ActionDescription>
   <p>The DataGrid columns can be stacked/grouped in order to show multiple levels of column headers. It can be done by nesting the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_Columns'>GridColumn</a></code> component within another <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridColumn.html'>GridColumn</a></code> component. The Column Resizing is enabled for normal and stacked column .</p>
   <p>In this demo, the columns <strong>OrderDate, Freight</strong> are grouped under <strong>Order Details</strong> and the columns <strong>ShippedDate, ShipCountry</strong> are grouped under <strong>Shipped Details</strong>.</p>
   <p>More information on column stacked header can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/columns/#resize-stacked-column'>documentation section</a>.</p>
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            
            <SfGrid DataSource="@GridData" AllowPaging="true" AllowResizing="true">
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" IsPrimaryKey="true" Width="120"></GridColumn>
                    <GridColumn HeaderText="Order Details">
                        <GridColumns>
                            <GridColumn Field="OrderDate" Width="130" HeaderText="Order Date" Format="d" TextAlign="TextAlign.Right" MinWidth="10"></GridColumn>
                            <GridColumn Field="Freight" Width="135" HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" MinWidth="10"></GridColumn>
                        </GridColumns>
                    </GridColumn>
                    <GridColumn HeaderText="Ship Details">
                        <GridColumns>
                            <GridColumn Field="ShippedDate" Width="140" HeaderText="Shipped Date" Format="d" TextAlign="TextAlign.Right" MinWidth="10"></GridColumn>
                            <GridColumn Field="ShipCountry" Width="145" HeaderText="Ship Country" MinWidth="10"></GridColumn>
                        </GridColumns>
                    </GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>

@code{

    public List<OrdersDetails> GridData { get; set; }

    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}
